<template>
    <div class="mydynamic">
        <Header :isBack="isBack" v-bind:title="title"></Header>
        <div class="dynamic-list " v-if="dynamiclist[0]">
            <div class="list-item padding-24 bg-f" v-for="(item,index) in dynamiclist" :key="index">
                <div class="head space-between">
                    <img :src="item.user_avator" alt="">
                    <div class="right flex-column">
                        <div class="center-col">
                            <p class="name fs-26">{{item.nickname}}</p>
                            <p class="fs-26 color-6">{{item.dynamic_type==1?'发布动态':(item.dynamic_type==2?'发布视频':'转发')}}</p>
                        </div>
                        <p class="fs-22 color-9">{{item.created_at}}</p>
                    </div>
                </div>
                <div class="content space-between" @click="gotodynamicDetails(item.id)">
                    <div class="none"></div>
                    <div class="right">
                        <p class="text fs-32" v-if="item.dynamic_type!=3">{{item.content}}</p>
                        <p class="text fs-32" v-if="item.dynamic_type==3">{{item.viewpoint}}</p>
                        <div class="img-list flex wrap" v-if="item.image_url&&item.dynamic_type!=3">
                            <img :src="items" alt="" v-for="(items,indexs) in item.image_url" :key="indexs" @click.stop="lookimg(item.image_url)" :class="{oneimg:item.image_url.length==1}">
                        </div>
                        <div class="video" v-if="item.video_url&&item.dynamic_type!=3">
                            <video :src="item.video_url" autoplay :poster="item.video_cover" controls x5-playsinline="true" playsinline="true" webkit-playsinline="true" v-if="item.id==id"></video>
                            <div class="img" v-else @click.stop="playvideo(item)">
                                <img :src="item.video_cover" alt="">
                                <div class="play center yuan">
                                <p class="play-btn"></p>
                                </div>
                            </div>
                        </div>
                        <div class="forwarding bg-f5 padding-24" v-if="item.dynamic_type==3">
                            <p class="text fs-32">
                                <span>@{{item.original_dynamic_user_name.nickname}}</span>{{item.content}}
                            </p>
                            <div class="video" v-if="item.video_url">
                                <video :src="item.video_url" autoplay :poster="item.video_cover" controls x5-playsinline="true" playsinline="true" webkit-playsinline="true" v-if="item.id==id"></video>
                                <div class="img" v-else @click.stop="playvideo(item)">
                                <img :src="item.video_cover" alt="">
                                <div class="play center yuan">
                                    <p class="play-btn"></p>
                                </div>
                                </div>
                            </div>
                            
                            <div class="forwardingimg-list flex wrap" v-if="item.image_url">
                                <img :src="items" alt="" v-for="(items,indexs) in item.image_url" :key="indexs" @click.stop="lookimg(item.image_url)" :class="{oneimg:item.image_url.length==1}">
                            </div>
                        </div>
                        <div class="share space-between padding-24" v-if="item.music_list_photo">
                            <img :src="item.music_list_photo" alt="">
                            <div class="right flex-column">
                                <p class="fs-32 color-0 overFlow">{{item.music_list_name}}</p>
                                <p class="fs-24 color-6">{{item.singer_name}}</p>
                            </div>
                        </div>
                        <div class="foot space-between">
                            <div class="left space-between">
                                <div class="center-col">
                                    <img :src="zhuanfa" alt="">
                                    <p class="fs-24 color-6">{{item.forward_number}}</p>
                                </div>
                                <div class="center-col">
                                    <img :src="dianzan" alt="">
                                    <p class="fs-24 color-6">{{item.click_number}}</p>
                                </div>
                                <div class="center-col">
                                    <img :src="comment" alt="">
                                    <p class="fs-24 color-6">{{item.comment_number}}</p>
                                </div>
                            </div>
                            <img :src="more" alt="" class="more" @click.stop="toshare(item)">
                        </div>
                    </div>
                </div>
            </div>
            <div class="center" @click="getmore">-- {{text}} --</div>
        </div>
        <div class="noFan" v-show="dynamiclist.length === 0">您还没有发布的动态额，快去发布吧~~~</div>
        <div class="logout lookimg center" @touchmove.prevent v-if="look" @click="look=false">
            <div class="img-box">
                <!-- <img :src="imgshow" alt=""> -->
                <swiper :options="swiperOption" class="swiper" v-if="imgshow.length > 0">
                    <swiper-slide v-for="(item,index) in imgshow" :key="index">
                        <img :src="item" alt class="imgList" />
                    </swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
            </div>
        </div>
        <div class="logout share-box" @touchmove.prevent v-if="share">
            <div class="bg-f5 ">
                <div class="top space-between padding-24">
                    <p class="fs-32">分享</p>
                    <img :src="del" alt="" @click="share=false">
                </div>
                <div class="space-around padding-24">
                    <div class="cell">
                        <img :src="wx" alt="">
                        <p>微信好友</p>
                    </div>
                    <div class="cell">
                        <img :src="pyq" alt="">
                        <p>微信朋友圈</p>
                    </div>
                    <div class="cell">
                        <img :src="weibo" alt="">
                        <p>微博</p>
                    </div>
                </div>
                <div class="center-col padding-24">
                    <div class="cell" @click="todelete">
                        <img :src="dele" alt="">
                        <p>删除</p>
                    </div>
                    <!-- <div class="cell">
                        <img :src="report" alt="">
                        <p>举报</p>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            isBack:true,
            title:'我的动态',
            look:false,
            share:false,
            obj:'',
            id:'',
            zhuanfa:require('../../assets/account/zhuanfa.png'),
            dianzan:require('../../assets/account/dianzan.png'),
            comment:require('../../assets/account/comment.png'),
            more:require('../../assets/index/more.png'),
            del:require("../../assets/account/del.png"),
            wx:require('../../assets/frend/weixin.png'),
            weibo:require('../../assets/frend/weibo.png'),
            pyq:require('../../assets/frend/pyq.png'),
            dele:require('../../assets/frend/delete.png'),
            report:require('../../assets/frend/report.png'),
            imgshow:[],
            dynamiclist:[],
            text:"点击加载更多",
            page:1,
            total:0,
            userinfo:'',
            userid:'',
            type:'',
            swiperOption: {
                // 是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                notNextTick: true,
                // 循环
                loop: false,
                // 设定初始化时slide的索引
                initialSlide: 0,
                // 滑动速度
                speed:300,
                // 滑动方向
                loopedSlides :1,
                direction: 'horizontal',
                // 小手掌抓取滑动
                grabCursor: true,
                slidesPerView: 'auto',
                pagination: {
                    el: '.swiper-pagination'
                },
                on: {
                // 滑动之后回调函数
                slideChangeTransitionStart: function () {
                    /* realIndex为滚动到当前的slide索引值 */
                    this.imgIndex = this.realIndex - 1
                }
                },
            },
        }
    },
    created(){
        this.getuserinfo()
        
    },
    methods:{
        getuserinfo(){
            var url = this.$host1 + `home/getPersonalMsg`;
                this.$axios.get(url).then(res => {
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.userinfo=resData.data
                    this.getdynamiclist()
                } else if(resData.code == 0){
                    // this.$router.push('/login');
                }else{
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        getdynamiclist(){
            let url = this.$host1 + `home/friend/loveUserDynamic`
            this.$axios.get(url,{
                params:{
                    user_id:this.userinfo.user_id,
                    pageSize:50,
                    page:this.page,
                    type:1
                }
            }).then(res => {
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    //this.dynamiclist=resData.data.result
                    this.total=resData.data.total_number
                    if(this.page==1){
                        this.dynamiclist=resData.data.result
                    }else{
                        this.dynamiclist=this.dynamiclist.concat(resData.data.result)
                    }
                    for(var i=0;i<this.dynamiclist.length;i++){
                    //this.dynamiclist[i].publish_time=this.dynamiclist[i].publish_time
                    this.dynamiclist[i].timeago=this.common.timeago(this.dynamiclist[i].publish_time*1000)
                    }
                    if(this.page<this.total/50){
                        this.text="点击加载更多"
                    }else{
                        this.text="END"
                    }
                }else{
                    this.dynamiclist=[]
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.dynamiclist=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        getmore(){
            if(this.page<this.total/50){
                this.page++
                this.AlertWin('加载中，请稍等！')
                this.getdynamiclist()
                
            }else{
                this.AlertWin('没有更多数据啦！')
            }
        },
        lookimg(i){
            this.look=true
            this.imgshow=i
        },
        playvideo(i){
            this.id=i.id
        },
        gotodynamicDetails(id){
            this.$router.push({
                path: '/dynamicDetails',
                query: {
                    id: id,
                }
            })
        },
        toshare(i){
            this.obj=i
            this.share=true
        },
        todelete(){
            let url = this.$host1 + `home/dynamic/deleteDynamic`
            var data={
                dynamic_id:this.obj.id
            }
            this.$axios.post(url,data).then(res => {
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    //this.dynamiclist=resData.data.result
                    this.AlertWin("删除成功");
                    this.page=1
                    this.getdynamiclist()
                    this.share=false
                }else{
                    
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                
                this.AlertWin("网络错误！请稍后重试！");
            });
        }
    }
}
</script>
<style lang="scss" >
.mydynamic{
    .dynamic-list{
        margin-top: 1rem;
        margin-bottom: 0.2rem;
        .list-item{
           height: 100%;
           border-bottom: 0.01rem solid #e9e9e9;
           .head{
               height: 1rem;
               img{
                   width: 0.75rem;
                   height: 0.75rem;
                   border-radius: 50%;
                   object-fit: cover;
               }
               .right{
                   width: calc(100% - 1rem);
                   height: 0.75rem;
                   .name{
                       color: #3875D1;
                       margin-right: 0.2rem;
                   }
               }
           } 
           .content{
               margin-top: 0.1rem;
               height: auto;
               padding-bottom: 0.2rem;
               .none{
                   width: 0.75rem;
                   height: auto;
               }
               .right{
                   width: calc(100% - 1rem);
                   height: auto;
                    .text{
                        line-height: 0.4rem;
                    }
                    .img-list{
                        width: 100%;
                        height: auto;
                        img{
                            width: 1.9rem;
                            height: 1.9rem;
                            object-fit: cover;
                            border-radius: 0.1rem;
                            margin: 0.1rem 0.05rem 0;
                        }
                        .oneimg{
                            width: auto;
                            max-width: 100%;
                            height: auto;
                            max-height: 5rem;
                            object-fit: cover;
                            border-radius: 0.1rem;
                        }
                    }
                    .video{
                        margin-top: 0.1rem;
                        width: 100%;
                        height: 3.4rem;
                        border-radius: 0.05rem;
                        .img{
                        width: 100%;
                        height: 100%;
                        position: relative;
                        border-radius: 0.05rem;
                        img{
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            border-radius: 0.05rem;
                        }
                        .play{
                            width: 1rem;
                            height: 1rem;
                            border: 0.01rem solid rgba(255, 255, 255, 0.8);
                            background-color: rgba(0, 0, 0, 0.5);
                            position: absolute;
                            top: 50%;
                            margin-top: -0.5rem;
                            left: 50%;
                            margin-left: -0.5rem;
                            //border-radius: 0.05rem;
                            .play-btn{
                            width: 0;
                            height: 0;
                            margin-left: 0.4rem;
                            width: 0px;
                            height: 0px;
                            border-left: 0.3rem solid transparent;
                            border-top: 0.2rem solid transparent;
                            border-right: 0.3rem solid #fff;
                            border-bottom: 0.2rem solid transparent;
                            opacity: 0.7;
                            transform: rotate(180deg);
                            }
                        }
                        
                        }
                        
                        video{
                            width: 100%;
                            height: 100%;
                            background-color: #444;
                            border-radius: 0.05rem;
                        }
                    }
                    .share{
                        width: 100%;
                        height: 1.2rem;
                        background-color: #f5f5f5;
                        margin-top: 0.1rem;
                        border-radius: 0.05rem;
                        img{
                            width: 0.87rem;
                            height: 0.87rem;
                            object-fit: cover;
                            border-radius: 0.06rem;
                        }
                        .right{
                            width: calc(100% - 1rem);
                            height: 0.8rem;

                        }
                    }
                    .forwarding{
                        padding-top:0.001rem; 
                        margin-top: 0.1rem;
                        width: 100%;
                        height: auto; 
                        border-radius: 0.1rem;
                        padding-bottom:0.2rem; 
                        .text{
                            margin-top: 0.2rem;
                            span{
                            color: #3875D1;
                            margin-right: 0.3rem;
                            }
                        }
                        video{
                            width: 100%;
                            height: 3.25rem;
                            margin-top: 0.1rem;
                            border-radius: 0.05rem;
                        }
                        .forwardingimg-list{
                            width: 100%;
                            height: auto;
                            img{
                                width: 1.74rem;
                                height: 1.74rem;
                                object-fit: cover;
                                border-radius: 0.1rem;
                                margin: 0.1rem 0.05rem 0;
                            }
                            .oneimg{
                            width: auto;
                            max-width: 100%;
                            height: auto;
                            max-height: 4rem;
                            object-fit: cover;
                            border-radius: 0.1rem;
                            }
                        }
                    }
                    .foot{
                        width: 100%;
                        height: 1rem;
                        .left{
                            width: 5rem;
                            height: 100%;
                            //background-color: greenyellow;
                            img{
                                width: 0.3rem;
                                height: 0.3rem;
                                margin-right: 0.2rem;
                            }
                        }
                        .more{
                            width: 0.08rem;
                            height: 0.3rem;
                        }
                    }
               }
           }
        }
        .center{
            height: 1rem;
        }
    }
    .lookimg{
        background-color: rgba(0, 0, 0, 1);
        .img-box{
            width: 100%;
            height: 100%;
            //background-color: #fff;
            .swiper{
                width: 100%;
                height: 100%;
                //background-color: red;
                // max-height: 80%!important;
                .swiper-wrapper{
                    // width: 100%;
                    // height: 100%!important;
                    display: flex;
                    align-items: center;
                    //background-color: blue;
                    .swiper-slide{
                    //margin-right: 0.2rem;
                        width:100%!important;
                        height: 100%!important;
                        //position: absolute;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        //background-color: green;
                        img{
                            width: 100%;
                            height: auto;
                            max-height: 100%;
                            object-fit: cover
                        }
                    }
                    
                }
                .swiper-pagination{
                    width: auto;
                    //height: 0.2rem;
                    //background-color: #fff;
                    //z-index: 9;
                    display: flex;
                    align-items: center;
                    position: absolute;
                    bottom: 1rem;
                    left: 50%;
                    //top: 50%;
                    transform: translate(-50%,0);
                    margin: 0 auto;
                    .swiper-pagination-bullet{
                    width: 0.2rem;
                    height: 0.2rem;
                    text-align: center;
                    line-height: 0.2rem;
                    font-size: 0.24rem;
                    background-color: #fff;;
                    }
                    .swiper-pagination-bullet-active{
                    background-color: #fff;
                    }
                }
                
            }
        }
    }
    .share-box{
        .bg-f5{
            width: 100%;
            height: 6rem;
            position: absolute;
            bottom: 0;
            left: 0;
            border-radius: 0.2rem 0.2rem 0 0;
            .top{
                height: 1rem;
                //background-color: greenyellow;
                img{
                width: 0.4rem;
                height: 0.4rem;
                }
            }
            .space-around{
                height: 2.3rem;
                border-bottom: 0.01rem solid #e9e9e9;
                //background-color: greenyellow;
                .cell{
                text-align: center;
                img{
                    width: 1.15rem;
                    height: 1.15rem;
                    border-radius: 50%;

                }
                p{
                    margin-top: 0.2rem
                }
                }
            }
            .center-col{
                height: 2.3rem;
                //border-bottom: 0.01rem solid #e9e9e9;
                //background-color: greenyellow;
                .cell{
                margin-left: 0.4rem;
                text-align: center;
                margin-right: 1rem;
                img{
                    width: 1.15rem;
                    height: 1.15rem;
                    border-radius: 50%;

                }
                p{
                    margin-top: 0.2rem
                }
                }
            }
        }
    }
    .noFan{
        width:100%;
        padding:30px 0;
        margin-top:1rem;
        text-align: center;
        color:gray;
        font-size:15px;
    }
}
</style>
